<template>
  <div class="my-container">

    <!-- 已登录 -->
    <div class="header has-login"
      v-if="user">
      <div class="user-info">
        <div class="left">
          <van-image round
            fit="cover"
            class="avatar"
            :src="userinfo.photo" />
          <div class="nickname">{{userinfo.name}}</div>
        </div>
        <div class="right">
          <van-button round
            size="mini"
            to="/user/profile">编辑资料</van-button>
        </div>
      </div>
      <div class="data-info">
        <div class="data-item">
          <span class="count">{{userinfo.art_count}}</span>
          <span class="text">头条</span>
        </div>
        <div class="data-item">
          <span class="count">{{userinfo.follow_count}}</span>
          <span class="text">关注</span>
        </div>
        <div class="data-item">
          <span class="count">{{userinfo.fans_count}}</span>
          <span class="text">粉丝</span>
        </div>
        <div class="data-item">
          <span class="count">{{userinfo.like_count}}</span>
          <span class="text">获赞</span>
        </div>
      </div>
    </div>
    <!-- 未登录 -->
    <div class="header not-login"
      v-else>
      <div class="login-btn"
        @click="$router.push({name:'login'})">
        <img src="@/assets/mobile.png"
          class="mobile-login">
        <span class="text">登录 / 注册</span>
      </div>
    </div>

    <!-- 宫格导航 -->
    <van-grid :column-num="2"
      clickable
      class="grid-nav">
      <van-grid-item class="grid-item">
        <i slot="icon"
          class="iconfont icon-shoucang"></i>
        <span slot="text"
          class="text">收藏</span>
      </van-grid-item>
      <van-grid-item class="grid-item">
        <i slot="icon"
          class="iconfont icon-lishi"></i>
        <span slot="text"
          class="text">历史</span>
      </van-grid-item>
    </van-grid>

    <!-- 单元格 -->
    <van-cell title="消息通知"
      is-link />
    <van-cell title="小智同学"
      is-link />
    <van-button block
      class="exit-item"
      v-if="user"
      @click="exitBtn">退出登录
    </van-button>
  </div>
</template>

<script>
// 使用容器的 mapState 方法 把容器里的数据映射到当前组件当中
import { mapState } from 'vuex'
// import { removeItem } from '@/utils/storage'
import { getUserInfo } from '@/api/user'
export default {
  // 组件名称
  name: 'MyIndex',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      userinfo: {}
    }
  },
  // 计算属性
  computed: {
    ...mapState(['user'])
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，el属性还不存在
  */
  created () {
    // 判断用户登录状态 如果用户登录了 就请求加载用户信息数据
    if (this.user) {
      this.initUserInfo()
    }
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    exitBtn () {
      this.$dialog.confirm({
        title: '确认退出吗？'
      })
        .then(() => {
          // on confirm 清除登录状态 也就是清除容器中的 user 和 本地存储中的 user
          // // 1、清空token信息
          // removeItem('TOUTIAO_USER_TOKRN')
          // // 2、让user为空
          // this.$store.state.user = null

          // 或者操作mutations方法 修改容器中的 user 更为简便
          this.$store.commit('setUser', null)
        })
        .catch(() => {
          // on cancel
        })
    },
    async initUserInfo () {
      try {
        const { data: res } = await getUserInfo()
        console.log(res.data)
        this.userinfo = res.data
      } catch (error) {
        // 如果获取失败 就给个提示
        // console.log(error)
        this.$toast('获取用户信息失败，请稍后重试')
      }
    }
  }
}
</script>

<style scoped lang="less">
.header {
  height: 361px;
  background: url("~@/assets/banner.png"); // css中使用@需要添加~,@代表src
  background-size: cover;
}
// 未登录
.not-login {
  display: flex;
  justify-content: center;
  align-items: center;
  .login-btn {
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .mobile-login {
      width: 132px;
      height: 132px;
      margin-bottom: 15px;
    }
    .text {
      color: #fff;
      font-size: 28px;
    }
  }
}
// 已登录
.has-login {
  .user-info {
    height: 231px;
    padding: 76px 32px 23px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      .avatar {
        width: 132px;
        height: 132px;
        margin-right: 23px;
        border: 4px solid #fff;
      }
      .nickname {
        font-size: 30px;
        color: #fff;
      }
    }
  }
  .data-info {
    height: 130px;
    display: flex;
    .data-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .count {
        font-size: 36px;
      }
      .text {
        font-size: 23px;
      }
    }
  }
}
// 宫格导航
.grid-nav {
  margin-bottom: 10px;
  .grid-item {
    height: 141px;
    i.iconfont {
      font-size: 45px;
    }
    .icon-shoucang {
      color: #eb5253;
    }
    .icon-lishi {
      color: #ff9d1d;
    }
    span.text {
      font-size: 28px;
    }
  }
}
.van-cell {
  font-size: 30px;
}
// 退出登录
.exit-item {
  height: 100px;
  color: #d86262;
  margin-top: 10px;
  font-size: 30px;
}
</style>
